<template>
	<div id="login">
		<div class="loginBox">
			<div class="loginBox_1">
				<h2>登录系统</h2>
				<el-autocomplete
				  popper-class="my-autocomplete"
				  v-model="state1"
				  :fetch-suggestions="querySearch"
				  placeholder="请输入账号"
				  @select="handleSelect">
				  <i
				    class="el-icon-edit el-input__icon"
				    slot="suffix"
				    @click="handleIconClick">
				  </i>
				  <template slot-scope="props">
				    <div class="name">{{ props.item.value }}</div>
				    <span class="addr">{{ props.item.address }}</span>
				  </template>
				</el-autocomplete>
				<el-input
				  placeholder="请输入密码"
				  v-model="state2"
				  clearable>
				</el-input>
				<div class="twoImg">
					<span><img src="https://www.haocheedai.com/CodeServlet?d=1509343954663"/>换一换</span>
					<input type="text" name="" id="" value="" />
				</div>
				<div class="loginBtn">
					<el-button type="primary" @click="clickLogin">登陆</el-button>
				</div>
				<div class="copyright">
					<p>版权所有@胖豆包股份有限公司</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//	import {mapState,mapMutations} from 'vuex'
	export default{
		data(){
			return {
				restaurants: [],
        		state1: '',
        		state2: ''
			}
		},
		mounted() {
	      	this.restaurants = this.loadAll();
	    },
		methods:{
//			...mapMutations({
//				showHide:"showHide"
//			})
			querySearch(queryString, cb) {
	        	var restaurants = this.restaurants;
	        	var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
	        	// 调用 callback 返回建议列表的数据
	        	cb(results);
      		},
	      	createFilter(queryString) {
	        	return (restaurant) => {
	          		return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	        	};
	      	},
	      	loadAll() {
	        	return [
	          		{ "value": "章海平", "address": "宇宙无敌大帅比" },
	          		{ "value": "刘树奇", "address": "此处省略一万字" },
	        	];
	      	},
	      	handleSelect(item) {
	        	console.log(item);
	      	},
	      	handleIconClick(ev) {
	        	console.log(ev);
	      	},
	      	clickLogin(){
	      		this.$router.push({path: '/'})
	      	}
		},
		computed:{
//			...mapState([
//				"show"
//			])
		},
		
	}
</script>

<style lang="less" scoped>
	@h:100%;
	.flex(){
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.size(){
		width: @h;
		height: @h;
	}
	
	
	#login{
		.size();
		.flex();
		background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509355608119&di=4862fe3dd94c4d81f12f1fc411edcf5d&imgtype=0&src=http%3A%2F%2F58pic.ooopic.com%2F58pic%2F12%2F81%2F80%2F26H58PICN7d.jpg) no-repeat;
		background-size: @h @h;
	}
	.loginBox{
		width: 400px;
		height: 600px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	
		.loginBox_1{
			width:80%;
			height: 90%;
			
			>h2{
				/*width: 100%;*/
				height: 40px;
				line-height: 40px;
				border-bottom: 2px solid #909090;
				font-weight: 500;
			}
			input{
				
			}
			>.twoImg{
				display: flex;
				margin-top: 30px;
				justify-content: space-between;
				span{
					.flex();
				}
			}
			>.copyright{
				padding-top: 60px;
				font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
			}
		}
	
		.loginBtn{
			width: 100%;
			height: 40px;
			margin-top: 30px;
			
			button{
				.size();
			}
		}
	}
</style>
<style>
	.el-autocomplete{
		width: 100%;
		margin: 10% 0;
	}
</style>